<template>
  <div class="detail-wrapper">
    <van-button @click="$router.go(-1)">返回</van-button>
    <template v-if="detailItem.length">
      {{ detailItem[0].id }}
      {{ detailItem[0].img }}
      标题：{{ detailItem[0].title }}
      <hr />
      <img :src="detailItem[0].img" />
      <hr />
      车辆描述：{{ detailItem[0].desc }}
      <br />
      车辆价格:{{ detailItem[0].price }}
    </template>
  </div>
</template>
<script>
export default {
  name: 'detail',
  data() {
    return {
      detailItem: [],
    }
  },
  created() {
    console.log(this.$route.params.id, '------详情')
    this.getDetailItem()
  },
  // 使用keep-alive之后，触发的生命周期
  activated() {
    console.log('activeated')
    console.log(this.$route.params.id, '------详情')
    this.getDetailItem()
  },
  methods: {
    async getDetailItem() {
      const detailItem = await this.$http.get('/api/detail', { params: { id: this.$route.params.id } })
      console.log('detailItem:', detailItem)
      this.detailItem = detailItem.data
    },
  },
}
</script>
